<template>
	<view class="container">
		<view style="background-color: #fff;">
			<Tabs :tabList="tabList" @tabChange="tabChange"></Tabs>
		</view>
		<view class="product-list" v-if="currentTab === 0">
			<ProductItem :showTag="false" v-for="(item, index) in listData" :key="index" :productInfo="item" from="collect"></ProductItem>
		</view>
		<view class="store-list" v-if="currentTab === 1">
			<view class="store-info flex-y-center" v-for="(item, index) in listData" :key="item.id"
				@tap="$myUni.navTo('/pages/merchant/detail?id=' + item.firmId)">
				<image :src="item.firmImgs.split(',')[0] | formatFile" mode="" class="store-avatar"></image>
				<view class="right-info">
					<view class="store-name">{{item.firmName}}</view>
					<view class="gray-text">{{item.mainBusiness}}</view>
					<view class="gray-text">{{item.firmProvince}}{{item.firmCity}}{{item.firmArea}}</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
	</view>
</template>

<script>
	import { getCollectList } from '@/api/user.js'
	export default {
		data() {
			return {
				tabList: ['收藏的设备', '收藏的店铺'],
				currentTab: 0,
				listData: [],
				total: 0,
				queryParams:{
					pageNo: 1,
					pageSize: 10,
					collectType: 2, // 1-企业店铺 2-商品
				},
				loadingStatus: 'loading'
			}
		},
		onShow(){
			this.queryParams.pageNo = 1
			this.listData = []
			this.getCollectList()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.getCollectList()
			}
		},
		methods: {
			tabChange(e) {
				this.currentTab = e
				this.queryParams.collectType = e == 0 ? 2: 1
				this.queryParams.pageNo = 1
				this.listData = []
				this.getCollectList()
			},
			getCollectList(){
				this.loadingStatus = 'loading'
				getCollectList(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.product-list {
		margin: 30rpx;
	}
	
	.store-list{
		margin: 30rpx;
		
		.store-info{
			background: #FFFFFF;
			border-radius: 19rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			
			.store-avatar{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			
			.right-info{
				flex:1;
				margin-left: 30rpx;
				
				.store-name{
					font-size: 33rpx;
					color: #333333;
					font-weight: 500;
				}
				
				.gray-text{
					font-size: 27rpx;
					color: #808080;
					padding-top: 10rpx;
				}
			}
		}
	}
</style>